<template>
  <!-- 联系人信息 -->
  <div class="contacts">
    <!-- 会员 -->
    <div class="member">
      <div class="mask" v-if="userInfo.identityType < 3">
        <div class="left">
          <div class="title">激活会员</div>
          <div class="open">
            开通会员，享受超级权限，查看全网供应，采购信息等。
          </div>
        </div>
        <div class="rightButton" @click="openDel = true">立即开通</div>
      </div>

      <div class="mask" v-else>
        <div class="left">
          <div class="title">尊敬的优企会员</div>
          <div class="open">
            享受超期权限 查看全网供应 采购信息等<br />
            会员有效期至：{{ userInfo.vipLoseEfficacyTime.substr(0, 10) }}
          </div>
        </div>
        <div class="rightButton" @click="Renew">续费</div>
      </div>
    </div>

    <!-- 列表 -->
    <div class="contactsList">
      <!-- 详细信息 -->
      <div
        class="cantactsInfo"
        v-for="(item, index) in infoList"
        :key="item.id"
      >
        <div class="name">
          <p>{{ item.name }}</p>
        </div>
        <div class="middle">
          <div class="job" v-if="item.position">
            <img
              src="../../assets/account/icon_lxrxx_sf@2x.png"
              alt=""
              class="card"
            />
            <span v-if="item.position">{{ item.position }}</span>
          </div>
          <div class="mobile" v-if="item.mobile">
            <img
              src="../../assets/account/icon_lxrxx_sj@2x.png"
              alt=""
              class="card"
            />
            <span v-if="item.mobile">{{ item.mobile }}</span>
          </div>
          <div class="phone" v-if="item.fixedTelephone">
            <img
              src="../../assets/account/icon_lxrxx_dh@2x.png"
              alt=""
              class="card"
            />
            <span v-if="item.fixedTelephone">{{ item.fixedTelephone }}</span>
          </div>
          <div class="email" v-if="item.email">
            <img
              src="../../assets/account/icon_lxrxx_yx@2x.png"
              alt=""
              class="card"
            />
            <span v-if="item.email">{{ item.email }}</span>
          </div>
        </div>
        <div class="right">
          <img
            src="../../assets/account/pic_ewm@2x.png"
            class="card"
            @click="toCard(index)"
            alt=""
            v-if="item.isChoice == 1"
          />
          <div
            :class="[
              'rightTop',
              { isTopClass: item.isChoice == 1 ? true : false },
            ]"
            @click="changeShops(index)"
          >
            <span>设为商铺显示</span>
            <div class="circle">
              <img
                src="../../assets/bussiness/btn_dl_sel@2x.png"
                class="checkImage"
                alt=""
                v-if="item.shops == 1"
              />
              <div class="checkbox" v-else></div>
            </div>
          </div>
          <div class="rightBottom">
            <button class="button default" v-if="item.isChoice == 1">
              默认
            </button>
            <button class="button delete" v-else @click="delContact(index)">
              删除
            </button>
            <button class="button edit" @click="edit(index)">编辑</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 增加联系人按钮 -->
    <div class="addContacts" @click="showAddPop">
      <div>
        <img
          src="../../assets/account/icon_lxrxx_tj@2x.png"
          alt=""
          class="add"
        /><span>添加联系人</span>
      </div>
    </div>

    <!-- 编辑，添加联系人弹窗 -->
    <el-dialog
      :title="!isAdd ? '编辑' : '添加'"
      :visible.sync="editDialog"
      width="5.71rem"
      center
      class="add_dialog"
    >
      <div class="user" v-if="form.isChoice == 1">
        <div class="userPhoto">
          <div v-if="form.head">
            <img :src="form.head | urlLoad" alt="" class="icon" />
          </div>
          <div v-else>
            <img src="../../assets/layout/no.png" class="icon" alt="" />
          </div>
        </div>
        <div class="account">
          <div class="userInfo">
            <p>登录账号：{{ form.mobile }}</p>
            <el-upload
              :class="uploadDemo"
              :action="imgUpload"
              :show-file-list="false"
              accept="image/*"
              :on-success="successCompanyLogo"
            >
              <div class="el-upload__text">上传头像</div>
            </el-upload>
          </div>
        </div>
        <div class="identity">
          <img
            v-if="userInfo.identityType == 1"
            src="../../assets/home/icon_sy_wrz@2x.png"
            class="image"
            alt=""
          />
          <img
            v-else
            src="../../assets/home/icon_sy_ysrz@2x.png"
            class="image"
            alt=""
          />
        </div>
      </div>
      <div class="line" v-if="form.isChoice == 1"></div>

      <el-form ref="form" :model="form">
        <el-form-item label="联系人">
          <el-input
            v-model="form.name"
            placeholder="请输入联系人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司" v-if="form.isChoice == 1">
          <el-input
            v-model="form.companyName"
            placeholder="请输入公司名称（选填）"
          ></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input
            v-model="form.position"
            placeholder="请输入公司职位（选填）"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input
            v-model="form.fixedTelephone"
            placeholder="请输入固定电话（选填）"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            v-model="form.email"
            placeholder="请输入邮箱（选填）"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addLinkman">保存</el-button>
      </span>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog
      title="提示"
      :visible.sync="isDel"
      width="5.71rem"
      center
      class="del_dialog button"
    >
      <span>是否删除此条信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDel = false">取消</el-button>
        <el-button type="primary" @click="deleteContact">确定</el-button>
      </span>
    </el-dialog>

    <!-- 开通会员 -->
    <el-dialog
      title="会员权益"
      :visible.sync="openDel"
      width="5.71rem"
      center
      class="openDialog button"
    >
      <div class="content" v-if="memberContent" v-html="memberContent"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="wechatConsult">微信咨询</el-button>
        <el-button type="primary" @click="open">立即开通优塑会员</el-button>
      </span>
    </el-dialog>

    <!-- 微信咨询 -->
    <el-dialog
      title="微信咨询"
      :visible.sync="askDialog"
      width="5.71rem"
      center
      class="askDialog button"
    >
      <img :src="consultContent.customerServiceQrCode" class="qrcode" alt="" />

      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="isDel = false">取消</el-button> -->
        <el-button type="primary" @click="open">立即开通优塑会员</el-button>
      </span>
    </el-dialog>

    <!-- 收费二维码 -->
    <el-dialog
      title="会员收费二维码"
      :visible.sync="chargeDialog"
      width="5.71rem"
      center
      class="chargeDialog button"
    >
      <img :src="this.codeUrl | urlLoad" id="qrcode" alt="" />
    </el-dialog>

    <!-- 名片二维码 -->
    <el-dialog
      title="二维码名片"
      :visible.sync="cardDialog"
      width="5.71rem"
      center
      class="cardDialog button"
    >
      <div class="topInfo">
        <!-- <img v-if="qrInfo.head" :src="qrInfo.head" class="photo" alt="" />
        <img v-else src="../../assets/layout/no.png" class="photo" alt="" /> -->
        <p>{{ qrInfo.companyName }}</p>
      </div>
      <div class="qrcode">
        <img :src="qrInfo.result | urlLoad" class="image" alt="" />
        <p>将二维码图片保存到相册</p>
        <p>微信扫码后打开店铺主页</p>
      </div>

      <!-- <span slot="footer" class="savefooter dialog-footer">
        <el-button type="primary">保存</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import bus from "../../utils/bus.js";

export default {
  data() {
    return {
      editDialog: false,
      infoList: [],
      form: {
        name: "",
        companyName: "",
        position: "",
        mobile: "",
        fixedTelephone: "",
        email: "",
        head: "",
      },
      memberId: "",
      userInfo: {},
      consultContent: "",
      memberContent: "",
      memberPrice: 0,
      codeUrl: "",
      editIndex: -1,
      currentIndex: -1,
      qrInfo: {},
      index: 0,
      detailList: [],
      isAdd: false,
      isDel: false,
      openDel: false,
      askDialog: false,
      chargeDialog: false,
      cardDialog: false,
      imgUpload: "https://www.yousubao-01.com/util/file/upload",
      uploadDemo: "",
      userLevel: {},
    };
  },
  created() {
    let info = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = info;
    this.linkmanList();
    this.memberRights();
    this.getUserInfo();
  },
  methods: {
    successCompanyLogo(response) {
      this.form.head = response.result;
      // console.log(this.form.head);
    },

    async getUserInfo() {
      let res = await this.$apiFun.getUserInfo();
      this.userLevel = res.result;
      // console.log("this.userLevel", this.userLevel);
    },

    // 会员权益
    async memberRights() {
      let params = {};
      let res = await this.$apiFun.memberRights(params);
      this.memberContent = res.result.rightsAndInterests;
      this.memberPrice = res.result.price;
    },

    delContact(index) {
      this.isDel = true;
      this.delIndex = index;
    },
    async deleteContact() {
      console.log(this.infoList[this.delIndex].shops);
      let id = this.infoList[this.delIndex].id;
      let res = await this.$apiFun.deleteContact({ id });

      if (res.code == 200) {
        this.$message({
          type: "success",
          duration: 1500,
          message: "删除成功",
        });
        this.linkmanList();
        this.isDel = false;
        if (this.infoList[this.delIndex].shops == 1) {
          bus.$emit("updateName", "");
          bus.$emit("updatePosition", "");
          bus.$emit("updateMobile", "");
        }
      }
    },
    // 添加联系人
    showAddPop() {
      // console.log(this.userLevel.memberAccount.isMember);
      if (this.userLevel.memberAccount.isMember !== 1) {
        this.$message.error("当前账号为子账号，无法添加联系人");
      } else {
        this.isAdd = true;
        this.editDialog = true;
        this.form = {
          name: "",
          companyName: "",
          position: "",
          mobile: "",
          fixedTelephone: "",
          email: "",
          isChoice: 0,
        };
        if (this.infoList.length == 0) {
          this.form.isChoice = 1;
        }
      }
    },
    // 联系人列表
    async linkmanList(index) {
      this.currentIndex = index;
      // console.log("this.currentIndex", this.currentIndex);
      let params = {
        memberId: this.userInfo.id,
      };
      let res = await this.$apiFun.linkmanList(params);

      this.infoList = res.result.rows;
      

      if (this.infoList.length == 1 && this.infoList[0].shops == 1) {
        let mainLinkman = {
          companyName: this.infoList[0].companyName,
          name: this.infoList[0].name,
          position: this.infoList[0].position,
          mobile: this.infoList[0].mobile,
        };
        sessionStorage.setItem("InfoLinkman", JSON.stringify(mainLinkman));
        this.changeShowPeople(index);
      } else if (this.infoList.length > 1) {
        let mainLinkman = {
          companyName: this.infoList[0].companyName,
          name: this.infoList[index].name,
          position: this.infoList[index].position,
          mobile: this.infoList[index].mobile,
        };
        sessionStorage.setItem("InfoLinkman", JSON.stringify(mainLinkman));
        this.changeShowPeople(index);
      } else if (this.infoList.length == 0) {
        sessionStorage.setItem("InfoLinkman", "");
      }
    },

    changeShowPeople(index) {
      bus.$emit("showNewPicture", JSON.stringify(this.infoList[0].head));
      bus.$emit("updateCompanyName", this.infoList[0].companyName);

      if (index == undefined) {
        bus.$emit("updateName", this.infoList[0].name);
        bus.$emit("updatePosition", this.infoList[0].position);
        bus.$emit("updateMobile", this.infoList[0].mobile);
      } else {
        bus.$emit("updateName", this.infoList[index].name);
        bus.$emit("updatePosition", this.infoList[index].position);
        bus.$emit("updateMobile", this.infoList[index].mobile);
      }
    },

    // 改变商铺显示
    async changeShops(index) {
      this.currentIndex = index;

      let params = {
        id: this.infoList[index].id,
      };
      let res = await this.$apiFun.changeShops(params);
      if (res.code == 200) {
        this.linkmanList(index);
      }
    },

    // 查看联系人详情
    async edit(index) {
      this.isAdd = false;
      this.editDialog = true;
      this.editIndex = index;
      let params = {
        id: this.infoList[index].id,
      };
      let res = await this.$apiFun.linkmanDetail(params);
      delete res.result.id;
      this.form = res.result;
      console.log("联系人信息：", this.form);
      
    },

    // 新增联系人
    async addLinkman() {
      let message = "";
      if (this.form.name == "") {
        message = "请输入联系人姓名";
      }
      // else if (this.infoList.length == 0 && this.form.companyName == "") {
      //   message = "请输入公司名称";
      // }
      // else if (this.infoList.length == 0 && this.form.position == "") {
      //   message = "请输入公司职位";
      // }
      else if (!/^1[3456789]\d{9}$/.test(this.form.mobile)) {
        message = "请输入正确的手机号";
      } else if (
        this.form.fixedTelephone !== "" &&
        !/^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/.test(this.form.fixedTelephone)
      ) {
        message = "请输入正确的固定电话";
      } else {
        let res;
        if (this.isAdd) {
          res = await this.$apiFun.addLinkman({
            ...this.form,
          });
        } else {
          res = await this.$apiFun.updateContact({
            id: this.infoList[this.editIndex].id,
            ...this.form,
          });
        }

        if (res.code == 200) {
          this.$message({
            type: "success",
            duration: 1500,
            message: `${this.isAdd ? "新增成功" : "修改成功"}`,
          });
          this.isAdd = false;
          this.editDialog = false;
          this.linkmanList();
          if (this.form.shops == 1 && this.isAdd == false) {
            bus.$emit("updateName", this.form.name);
            bus.$emit("updatePosition", this.form.position);
            bus.$emit("updateMobile", this.form.mobile);
          }
        }
      }
      if (message) {
        this.$message.error(message);
      }
    },

    // 开通会员
    open() {
      this.openDel = this.askDialog = false;
      this.chargeDialog = true;
      this.openMember();
    },

    // 续费
    Renew() {
      this.chargeDialog = true;
      this.openMember();
    },

    // 获取支付二维码
    async openMember() {
      let params = {
        orderIdOrSN: "1",
        payType: "WXNATIVE",
        tradeType: "NATIVE",
      };

      if (this.userInfo.hasSupplierInformation == 1) {
        let res = await this.$apiFun.openMember(params);
        this.codeUrl = res.result;
        // this.payReturn()
      } else {
        this.$message({
          type: "error",
          message: "当前您还没入驻供应商，请先入驻供应商",
          duration: 1500,
        });
        this.chargeDialog = false;

        setTimeout(() => {
          this.$router.push("supplier_enter");
        }, 2000);
      }
    },

    // 微信咨询
    wechatConsult() {
      this.openDel = false;
      this.askDialog = true;
      this.wechatInformation();
    },

    async wechatInformation() {
      let res = await this.$apiFun.wechatInformation();
      this.consultContent = res.result;
    },

    // 打开名片
    async toCard(index) {
      this.cardDialog = true;
      let params = {
        memberId: this.infoList[index].memberId,
      };
      let res = await this.$apiFun.QRcodeInfo(params);
      this.qrInfo = res.result;
      // console.log("this.cardPicture", this.cardPicture);
    },
  },
  watch: {
    "$route.name": {
      handler() {
        if (this.$route.name == "contact_info") {
          this.linkmanList();
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
// 上传头像
/deep/ .el-upload {
  font-family: Microsoft YaHei;
  .el-upload__text {
    text-align: left;
    width: 0.66rem;
    height: 0.28rem;
    font-size: 0.16rem;
    font-weight: 400;
    color: #333333;
    border-bottom: 1px solid #f42551;
    cursor: pointer;
  }
}

/deep/ .el-checkbox {
  width: 0.2rem !important;
  height: 0.2rem !important;
  // background: black !important;
  border-radius: 2px !important;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #f42551 !important;
  border-color: #f42551 !important;
}

/deep/.el-dialog {
  margin-top: 2rem !important;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0px 0px;
    background: #efefef;
    display: flex;
    justify-content: space-between;
    .el-dialog__title {
      margin-left: 0.3rem;
      font-size: 0.2rem;
      font-weight: bold;
      color: #333333;
    }
  }
  .el-dialog__footer {
    height: 0.7rem;
    padding: 0;
    .dialog-footer {
      width: 100%;
      height: 0.4rem !important;
      display: flex;
      justify-content: center;

      .el-button--default {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 5px;
        display: block;
      }
      .el-button--primary {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #f42551;
        border-radius: 5px;
        border: none;
        margin-left: 0.3rem;
        display: block;
      }
    }
  }
}

.contacts {
  height: 100%;
  .member {
    width: 100%;
    height: 0.8rem;
    background: url(../../assets/account/bg_lxrxx@2x.png) no-repeat;
    background-size: 100% 100%;
    margin-bottom: 0.2rem;

    .mask {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .left {
        width: 6.618rem;
        // height: 100%;
        text-align: left;
        font-family: Microsoft YaHei;

        .title {
          font-size: 0.24rem;
          font-weight: bold;
          color: #654932;
        }
        .open {
          font-size: 0.18rem;
          font-weight: 400;
          color: #654932;
        }
      }
      .rightButton {
        width: 1rem;
        height: 0.4rem;
        line-height: 0.4rem;
        background: url(../../assets/account/btn_lxrxx_kt@2x.png) no-repeat;
        background-size: 100% auto;
        font-size: 0.2rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        cursor: pointer;
        color: #654932;
      }
    }
  }

  // 列表
  .contactsList {
    // 详细信息
    .cantactsInfo {
      width: 100%;
      height: 2.19rem;
      background: #ffffff;
      box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
      border-radius: 10px;
      display: flex;
      flex: 1;
      justify-content: space-around;
      margin-bottom: 0.2rem;
      align-items: center;
      .name {
        width: 1.324rem;
        /* height: 100%; */
        font-size: 0.24rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        // margin-top: 10%;
        p {
          margin: 0;
        }
      }
      .middle {
        width: 5.515rem;
        height: 100%;
        // background: skyblue;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .job,
        .mobile,
        .phone,
        .email {
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          display: flex;
          color: #333333;
          align-items: center;
          .card {
            width: 0.34rem;
            height: 0.34rem;
          }
        }
      }
      .right {
        // width: 30%;
        width: 2.3rem;
        height: 100%;
        // background: yellow;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .card {
          width: 0.48rem;
          height: 0.48rem;
          position: absolute;
          top: 0.08rem;
          right: 0;
          cursor: pointer;
        }
        .rightTop {
          font-size: 0.18rem;
          margin-top: 0.7rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          display: flex;
          justify-content: center;
          cursor: pointer;

          span {
            margin-right: 0.12rem;
          }
          .circle {
            .checkImage {
              width: 0.22rem;
              height: 0.22rem;
            }
            .checkbox {
              width: 0.2rem;
              height: 0.2rem;
              border: 1px solid #999999;
            }
          }
        }
        // .isTopClass {
        //   margin-top: 0.7rem;
        // }
        .rightBottom {
          .button {
            width: 0.8rem;
            height: 0.4rem;
            border-radius: 5px;
            border: none;
            font-size: 0.18rem;
            font-family: Microsoft YaHei;
            color: #333333;
            font-weight: bold;
            background: #ffffff;
            margin-right: 0.1rem;
            cursor: pointer;
          }
          .default {
            color: #cccccc;
            pointer-events: none;
          }
          // .delete{}
          .edit {
            background: #f42551;
            color: #ffffff;
          }
        }
      }
    }
  }

  // 增加联系人
  .addContacts {
    width: 100%;
    height: 0.6rem;
    background: #ffffff;
    box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
    border-radius: 10px;
    font-size: 0.18rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #f42551;

    div {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .add {
        width: 0.24rem;
        height: 0.24rem;
      }
    }
  }

  // 编辑弹窗
  .add_dialog {
    .user {
      width: 100%;
      height: 1.2rem;
      // background: skyblue;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .userPhoto {
        width: 1rem;
        .icon {
          width: 1rem;
          height: 1rem;
          border-radius: 50%;
          object-fit: cover;
        }
      }
      .account {
        width: 2.4486rem;

        .userInfo {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          p {
            font-size: 0.22rem;
            font-weight: bold;
            color: #333333;
            // margin: 0;
            margin-block-end: 0.12rem;
          }
          span {
            font-size: 0.16rem;
            font-weight: 400;
            color: #333333;
            // text-decoration: underline;
            display: inline-block;
            height: 0.3rem;
            line-height: 0.3rem;
            border-bottom: 1px solid #f42551;
            cursor: pointer;
            // &:last-child {
            //   margin-left: 5%;
            // }
          }
        }
      }
      .identity {
        width: 0.942rem;
        height: 0.42rem;
        display: flex;
        align-items: flex-start;
        .image {
          width: 100%;
        }
      }
    }
    .line {
      width: 100%;
      height: 2px;
      background: #efefef;
      margin: 0.3rem 0;
    }

    /deep/.el-dialog__body {
      padding: 0.25rem 0.5rem 0rem;
      .el-form {
        .el-form-item {
          display: flex;
          .el-form-item__content {
            flex: 1;
          }
          .el-form-item__label {
            text-align: left;
            width: 0.9rem;
          }
          .el-select {
            width: 100%;
          }
          .el-button {
            width: 1.2rem;
            position: absolute;
            right: 0.3rem;
            font-size: 0.16rem;
            font-weight: 400;
            text-decoration: underline;
            color: #f42551;
            border: none;
            background: transparent;
          }
        }
      }
    }
  }

  .del_dialog {
    /deep/.el-dialog {
      .el-dialog__body {
        text-align: center;
        span {
          font-size: 0.2rem;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }

  // 开通会员
  .openDialog,
  .askDialog,
  .chargeDialog,
  .cardDialog {
    font-family: Microsoft YaHei;
    /deep/ .el-dialog__header {
      justify-content: center;
      .el-dialog__title {
        font-size: 0.2rem;
        margin-left: 0;
      }
    }
    .content {
      font-size: 0.2rem;
      color: #333333;
      .title {
        font-weight: bold;
        margin-top: 0.25rem;
        &:first-child {
          margin-top: 0;
        }
      }
    }
    .topInfo {
      display: flex;
      justify-content: center;
      align-items: center;
      .photo {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
      }
      p {
        font-size: 0.22rem;
        font-weight: bold;
        color: #333333;
        // margin-left: 0.2rem;
      }
    }
    .qrcode {
      // margin-top: 0.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;

      .image {
        width: 2.8rem;
        height: 2.8rem;
      }
      p {
        font-size: 0.16rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        margin: 0;
        &:nth-child(2) {
          margin-top: 0.2rem;
        }
      }
    }

    .savefooter {
      .el-button--primary {
        margin-left: 0;
      }
    }
  }

  // 微信咨询
  .askDialog,
  .chargeDialog {
    /deep/ .el-dialog__body {
      display: flex;
      flex-direction: column;
      align-items: center;
      .qrcode,
      #qrcode {
        width: 1.8rem;
        height: 1.8rem;
      }
      span {
        font-size: 0.2rem;
        font-weight: 400;
        color: #333333;
        line-height: 0.3rem;
      }
      .text {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }

  .askDialog {
    /deep/ .el-dialog__body {
      .qrcode {
        width: 3rem;
        height: 3rem;
      }
    }
    /deep/ .el-dialog {
      .el-button--primary {
        margin-left: 0;
      }
    }
  }
}
.button /deep/ .el-button.el-button--default {
  width: 2rem;
  border: 1px solid #333333;
  border-radius: 5px;
  font-size: 0.16rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
</style>